<template>
    <div style="font-size: .16rem">
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <div v-show="tips" class="top-nav">
            <p style="font-weight: bold">欢迎来到英语情景对话</p>
            <div>tips：请选择你的性别</div>
        </div>
        </transition>
        <div style="position:relative;top:2rem;display: flex;text-align: center">
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutLeft">
                <div v-show="male" style="flex: 1" @click="selectSex('male')">
                    <div><i class="icon iconfont icon-nansheng" style="font-size:.8rem;color: #10aeff;"></i>
                    </div>
                    <div><span>male</span></div>
                </div>
            </transition>
            <transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutRight">
                <div v-show="female" style="flex: 1" @click="selectSex('female')">
                    <div><i class="icon iconfont icon-nvsheng" style="font-size:.8rem;color: #f37977;"></i>
                    </div>
                    <div><span>female</span></div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex';
    export default {
        data() {
            return {
                male: false,
                female: false,
                tips: false
            }
        },
        components: {},
        mounted() {
            this.male = true;
            this.female = true;
            this.tips = true;
        },
        computed: {
            ...mapState([
                'sex'
            ]),
        },
        watch: {},
        methods: {
            ...mapMutations([
                'SAVE_SEX'
            ]),
            selectSex(sex) {
                if(sex) {
                    this.SAVE_SEX(sex);
                    this.$router.push('/home/selectMenu');
                }
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    .top-nav {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        background: rgba(219, 216, 216, 0.9);
        text-align: center;
        font-size: .14rem;z-index:6
    }
</style>